<template>
  <div class="app-container" ref="appcontainer">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item   label="门店名称" prop="storeId">
        <treeselect
          :defaultExpandLevel=1
          v-model="queryParams.storeId"
          :options="storeOptions"
          :normalizer="normalizer"
          placeholder="请输入或选择门店名称"
          style="width: 350px"/>
      </el-form-item>
      <el-form-item label="商品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否上架" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择是否上架" clearable size="small">
          <el-option
            v-for="dict in stateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
    <!--  <el-form-item label="是否热卖" prop="hotState">
        <el-select v-model="queryParams.hotState" placeholder="请选择是否热卖" clearable size="small">
          <el-option
            v-for="dict in hotStateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
        <el-button  size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['product:storeProduct:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain

          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['product:storeProduct:export']"
          v-if="false"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :height="tableHeight" :data="storeProductList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
      <el-table-column label="门店名称" align="center" prop="storeName" />
      <el-table-column label="商品名称" align="center" prop="productName" />

      <el-table-column label="商品主图" align="center" prop="productImage" >
        <template width="120" slot-scope="scope">
          <img style="width:60px;height:60px;border:none;" :src="scope.row.productImage">
        </template>
      </el-table-column>
<!--      <el-table-column label="项目详情" align="center" prop="itemDetail" show-overflow-tooltip :formatter="detailFormatter"/>-->
      <el-table-column label="分类" align="center" prop="classifyName" />
      <el-table-column label="团购价格" align="center" prop="price" />
      <el-table-column label="门店价格" align="center" prop="storePrice" />
      <el-table-column label="自动下架时间" align="center" prop="offautoTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.offautoTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="自动上架时间" align="center" prop="onautoTime" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.onautoTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="销量" align="center" prop="salesNum" />
      <el-table-column label="虚拟销量" align="center" prop="fictiNum" />
      <el-table-column label="是否上架" align="center" prop="state">
        <template slot-scope="scope">
          <dict-tag :options="stateOptions" :value="scope.row.state"/>
        </template>
      </el-table-column>
      <el-table-column label="是否热卖" align="center" prop="hotState">
        <template slot-scope="scope">
          <dict-tag :options="hotStateOptions" :value="scope.row.hotState"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="不可用时间" align="center" prop="disabledDate" />-->
<!--      <el-table-column label="有效期天数" align="center" prop="validDay" />-->
<!--      <el-table-column label="提前预约数字" align="center" prop="appoinNum" />-->
<!--      <el-table-column label="提前预约单位天或小时" align="center" prop="appoinUnit" />-->
<!--      <el-table-column label="适用人数" align="center" prop="peopleNum" />-->
<!--      <el-table-column label="适用人群" align="center" prop="peopleRight" />-->
<!--      <el-table-column label="规则提醒" align="center" prop="ruleReminder" />-->
<!--      <el-table-column label="温馨提示" align="center" prop="reminder" />-->
<!--      <el-table-column label="商家服务" align="center" prop="service" />-->
      <el-table-column label="商家新人优惠最大金额" align="center" prop="couponsMaxNewUse" />
      <el-table-column label="商家优惠最大金额" align="center" prop="couponsMaxAll" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            
            v-hasPermi="['product:storeProduct:edit']"
          >修改</el-button>
          
          <el-button
            size="mini"
            type="text"

            @click="handleDelete(scope.row)"
            v-hasPermi="['product:storeProduct:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商品对话框 -->
    <el-dialog  class="dialog" :close-on-click-modal="false" :title="title" :visible.sync="open" width="1200px"   append-to-body @close="handleFormReset">
      <div class="el-dialog-div">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="100px">
        
        <el-row>
          <el-form-item   label="门店名称" prop="storeId">
            <treeselect
              :defaultExpandLevel=1
              v-model="form.storeId"
              :options="storeOptions"
              :normalizer="normalizer"
              placeholder="请输入或选择门店名称"
              style="width: 350px"/>
          </el-form-item>
        </el-row>
        
        <el-form-item label="团单名称" prop="productName" >
          <el-input v-model="form.productName" placeholder="请输入团单名称"  maxlength="30"  />
        </el-form-item>

        <el-row>
          <el-form-item label="团单分类" prop="classifyId" >
            <el-select v-model="form.classifyId" placeholder="请选择">
              <el-option
                v-for="item in classifyOptions"
                :key="item.id"
                :label="item.classifyName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="团单主图" prop="productImage">
            <imageUpload  :limit="1" :multiple="false" v-model="form.productImage"/>
          </el-form-item>
        </el-row>

        <el-form-item label="团单售价" prop="price" >
          <el-input type="number" v-model="form.price" placeholder="请输入团单售价"  maxlength="30"  />
        </el-form-item>

        <el-table-column prop="originalPrice" label="原价">
          <template slot-scope="scope">
            <el-form-item :prop="'dataValue.'+scope.$index + '.originalPrice'" :rules='rules.originalPrice'>
              <el-input type="number" v-model="scope.row.originalPrice"></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-form-item label="团单项目" prop="dataValue" >
          <el-row >
            <el-button @click="addTang">添加全含项目</el-button> 
          </el-row>
        </el-form-item>
        <el-form-item label="团单项目" prop="dataValue2" >
          <el-row >
            <el-button @click="addTang2">添加多选项目</el-button>
          </el-row>
        </el-form-item>

        <!--全含项目-->
        <el-table :data="form.dataValue" highlight-current-row style="text-align:center;width: 100%">
          <el-table-column prop="classifyIndex" label="分类(全含项目)"  >
            <template slot-scope="scope" >
                <el-form-item :prop="'dataValue.'+scope.$index + '.classifyIndex'" :rules='rules.classifyIndex'>
                  <el-select v-model="scope.row.classifyIndex" placeholder="请选择" @change="updateValueT(scope.row,scope.$index )">
                    <el-option
                      v-for="item in classifyOptions"
                      :key="item.id"
                      :label="item.classifyName"
                      :value="item.id">
                    </el-option>
                  </el-select> 
                  
                </el-form-item>
            </template>
          </el-table-column>
        
          <!-- <el-table-column prop="productName" label="项目名">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.productName'" :rules='rules.productName'>
                <el-input type="type" v-model="scope.row.productName"></el-input>
              </el-form-item>
            </template>
          </el-table-column> -->
          <el-table-column label="项目名">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.productName'">
                <el-input type="type" v-model="scope.row.productName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="市场价">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.price'" :rules='rules.price'>
                <el-input size="medium" type="number" v-model="scope.row.price"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column label="市场价">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.price'" >
                <el-input size="medium" type="number" v-model="scope.row.price"></el-input>
              </el-form-item>
            </template>
          </el-table-column> -->
          
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button   type="danger" size="mini" @click="del(scope.$index)" icon='el-icon-delete'></el-button>
              <el-button   type="primary" size="mini" @click="addTang" icon='el-icon-plus'></el-button>
            </template>
          </el-table-column>
        </el-table>


        <!--多选项目-->
        <el-table :data="form.dataValue2" highlight-current-row style="text-align:center;width: 100%">
          <!-- <el-table-column prop="name" label="多选"  >
            <template slot-scope="scope" >
                <el-form-item :prop="'dataValue.'+scope.$index + '.name'" :rules='rules.name'>
                  <el-select v-model="scope.row.name" placeholder="请选择" @change="updateValueT2(scope.row,scope.$index )">
                    <el-option
                      v-for="item in duoxuan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select> 
                  
                </el-form-item>
            </template>
          </el-table-column> -->
          
          <el-table-column prop="classifyIndex" label="分类"  >
            <template slot-scope="scope" >
                <el-form-item :prop="'dataValue.'+scope.$index + '.classifyIndex'" :rules='rules.classifyIndex'>
                  <el-select v-model="scope.row.classifyIndex" placeholder="请选择" @change="updateValueT3(scope.row,scope.$index )">
                    <el-option
                      v-for="item in classifyOptions"
                      :key="item.id"
                      :label="item.classifyName"
                      :value="item.id">
                    </el-option>
                  </el-select> 
                  
                </el-form-item>
            </template>
          </el-table-column>
        
          <!-- <el-table-column prop="productName" label="项目名">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.productName'" :rules='rules.productName'>
                <el-input type="type" v-model="scope.row.productName"></el-input>
              </el-form-item>
            </template>
          </el-table-column> -->
          <el-table-column label="项目名">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.productName'">
                <el-input type="type" v-model="scope.row.productName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="市场价">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.price'" :rules='rules.price'>
                <el-input size="medium" type="number" v-model="scope.row.price"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column label="市场价">
            <template slot-scope="scope">
              <el-form-item :prop="'dataValue.'+scope.$index + '.price'" >
                <el-input size="medium" type="number" v-model="scope.row.price"></el-input>
              </el-form-item>
            </template>
          </el-table-column> -->
          
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button   type="danger" size="mini" @click="del2(scope.$index)" icon='el-icon-delete'></el-button>
              <el-button   type="primary" size="mini" @click="addTang2" icon='el-icon-plus'></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 图文详情 -->
        <el-table :data="form.richEditor" highlight-current-row style="text-align:center;width: 100%">
        
          <el-table-column label="图文详情">
            <template slot-scope="scope">
              <!-- 添加文字 -->
              <el-row  v-if="scope.row.type == 'text'" >
                <!-- <el-button v-if="scope.$index == 0"  style="color:#ccc;"  >上移</el-button> -->
                <el-button  @click="moveUp(scope.$index)" >上移</el-button>

                <!-- <el-button v-if="scope.$index == form.richEditor.length-1"  style="color:#ccc;" >下移</el-button> -->
                <el-button  @click="moveDown(scope.$index)" >下移</el-button>

                <el-button v-if="scope.$index == 0" style="color:#ccc;" >置顶</el-button>
                <el-button v-else @click="moveTop(scope.$index)">置顶</el-button>

                <el-button @click="tuwendel(scope.$index)" >删除</el-button>
                <el-input
                  type="textarea"
                  :rows="2"
                  class="editorTextarea"
                  :class=" [
                    form.richEditor[scope.$index].weightState ? 'bold' : '',
                    form.richEditor[scope.$index].centerState ? 'center' : '',
                    form.richEditor[scope.$index]['colorArray'][form.richEditor[scope.$index]['colorSuffix']]['name'] == '黑色' ? 'blackcolor' : form.richEditor[scope.$index]['colorArray'][form.richEditor[scope.$index]['colorSuffix']]['name'] == '蓝色' ? 'bluecolor' : form.richEditor[scope.$index]['colorArray'][form.richEditor[scope.$index]['colorSuffix']]['name'] == '绿色' ? 'greencolor' : 'redcolor',
                    form.richEditor[scope.$index]['fontArray'][form.richEditor[scope.$index]['fontSuffix']]['name'] == '小' ? 'smallfont' : form.richEditor[scope.$index]['fontArray'][form.richEditor[scope.$index]['fontSuffix']]['name'] == '中' ? 'midfont' : 'bigfont'
                  ]"

                  placeholder="请输入内容"
                  v-model="scope.row.value">
                </el-input>

                <el-button @click="editBlack(scope.$index,1)">{{ form.richEditor[scope.$index]['colorArray'][form.richEditor[scope.$index]['colorSuffix']]['name'] }}</el-button>
                <el-button @click="editFontSize(scope.$index,2)">字号 {{ form.richEditor[scope.$index]['fontArray'][form.richEditor[scope.$index]['fontSuffix']]['name'] }}</el-button>
                
                <el-button @click="editorBold(scope.$index)">加粗</el-button>
                <el-button @click="editorCenter(scope.$index)">居中</el-button>

              </el-row>
              <!-- 添加小图 -->
              <el-row v-if="scope.row.type == 'littleImg'" >
                <el-row>
                  <!-- <el-button v-if="scope.$index == 0"  style="color:#ccc;"  >上移</el-button> -->
                  <el-button @click="moveUp(scope.$index)" >上移</el-button>

                  <!-- <el-button v-if="scope.$index == form.richEditor.length-1"  style="color:#ccc;" >下移</el-button> -->
                  <el-button @click="moveDown(scope.$index)" >下移</el-button>

                  <el-button v-if="scope.$index == 0" style="color:#ccc;" >置顶</el-button>
                  <el-button v-else @click="moveTop(scope.$index)">置顶</el-button>
                  <el-button @click="tuwendel(scope.$index)" >删除</el-button>
                </el-row>
                <el-row>
                  <el-form-item label="小图" prop="productImage">
                    <imageUpload  :limit="5" :multiple="false" v-model="scope.row.value"/>
                  </el-form-item>
                </el-row>
              </el-row>
              <!-- 添加大图 -->
              <el-row v-if="scope.row.type == 'bigImg'">
                <el-row>
                  <!-- <el-button v-if="scope.$index == 0"  style="color:#ccc;"  >上移</el-button> -->
                  <el-button @click="moveUp(scope.$index)" >上移</el-button>

                  <!-- <el-button v-if="scope.$index == form.richEditor.length-1"  style="color:#ccc;" >下移</el-button> -->
                  <el-button @click="moveDown(scope.$index)" >下移</el-button>

                  <el-button v-if="scope.$index == 0" style="color:#ccc;" >置顶</el-button>
                  <el-button v-else @click="moveTop(scope.$index)">置顶</el-button>

                  <el-button @click="tuwendel(scope.$index)">删除</el-button>
                </el-row>
                <el-row>
                  <el-form-item label="大图" prop="productImage">
                    <imageUpload  :limit="1" :multiple="false" v-model="scope.row.value"/>
                  </el-form-item>
                </el-row>
              </el-row>

              <!-- 添加视频 -->
              <el-row v-if="scope.row.type == 'video'">
                <el-row>
                  <!-- <el-button v-if="scope.$index == 0"  style="color:#ccc;"  >上移</el-button> -->
                  <el-button @click="moveUp(scope.$index)" >上移</el-button>

                  <!-- <el-button v-if="scope.$index == form.richEditor.length-1"  style="color:#ccc;" >下移</el-button> -->
                  <el-button @click="moveDown(scope.$index)" >下移</el-button>

                  <el-button v-if="scope.$index == 0" style="color:#ccc;" >置顶</el-button>
                  <el-button v-else @click="moveTop(scope.$index)">置顶</el-button>

                  <el-button @click="tuwendel(scope.$index)">删除</el-button>
                </el-row>

                <el-row>
                  <el-form-item label="视频" >
                    <file-upload :isShowTip="false"  :limit="1"  :multiple="false"  :fileSize="1024" :fileType="videoFileType" v-model="scope.row.value"/>
                  </el-form-item>
                </el-row>
              </el-row>

            </template>
            
          </el-table-column>
          
        </el-table>

        <el-row>
          
          <el-button @click="addRich(1)" >添加文字</el-button>
          <el-button @click="addRich(2)" >添加大图</el-button>
          <el-button @click="addRich(3)" >添加小图</el-button>
          <el-button @click="addRich(4)" >添加视频</el-button>
        </el-row>

        <el-form-item label="虚拟销量" style="margin-top:20px;" prop="fictiNum"  >
          <el-input 
            v-model.number="form.fictiNum" 
            type="number" 
            :prop="{ pattern: '\\d*' }" 
            placeholder="请输入虚拟销量" 
               
          />
        </el-form-item>

        <el-row>
          <el-form-item label="核销次数" prop="writeOffNum" style="margin-top:20px;" >
            <el-input v-model.number="form.writeOffNum" type="number" :prop="{ pattern: '\\d*' }" placeholder="请输入核销次数"    />
          </el-form-item>
        </el-row>
        
        <el-row>
          <el-form-item label="是否会员专享" prop="isVip">
            <el-select v-model="form.isVip" placeholder="请选择是否会员专享">
              <el-option
                v-for="dict in YNArray"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-form-item label="会员售价" prop="vipPrice" >
          <el-input type="number" v-model="form.vipPrice" placeholder="请输入会员售价"  maxlength="30"  />
        </el-form-item>

        <!-- <el-row>
          <el-form-item label="是否热卖" prop="hotState">
            <el-select v-model="form.hotState" placeholder="请选择是否热卖">
              <el-option
                v-for="dict in YNArray"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="是否新人专享" prop="newUserState">
            <el-select v-model="form.newUserState" placeholder="请选择是否新人专享">
              <el-option
                v-for="dict in YNArray"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row> -->

        <el-row>
          <el-form-item label="是否固定有效期" prop="fixedTimeState">
            <el-select v-model="form.fixedTimeState" placeholder="请选择是否固定有效期">
              <el-option
                v-for="dict in YNArray"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="有效期开始日期" prop="useStartTime">
            <el-date-picker
              v-model="form.useStartTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="有效期结束日期" prop="useEndTime">
            <el-date-picker
              v-model="form.useEndTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="提前多久预约" prop="appoinNum">
            <el-input-number v-model="form.appoinNum" controls-position="right" :min="1" :prop="{ pattern: '\\d*' }" />
          </el-form-item>

          <el-select v-model="form.appoinUnit" placeholder="请选择">
            <el-option
              v-for="item in unitArray"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-row>

        <el-row>
          <el-form-item label="适用人数" prop="peopleNum">
            <el-input-number v-model="form.peopleNum" controls-position="right" :min="1" :prop="{ pattern: '\\d*' }" />
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="选择适用人群" prop="peopleRightOld">
              <el-radio-group v-model="form.peopleRightOld" >
                  <el-radio :label="item.dictValue" :key="item.dictCode" v-for="item in serviceItemDic" border size="medium">                
                      {{item.dictLabel}}
                  </el-radio>
              </el-radio-group>
            
          </el-form-item>
        </el-row>
        
      </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
    
    <el-dialog
      :title="colorFontTitle"
      :visible.sync="colorFontVisible"
      width="30%"
      @close="handleClose"
      class="colorfont"
      >
      <el-select v-model="colorFontValue" placeholder="请选择" @change="colorFontChange">
        <el-option
          v-for="item in colorFontOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
    </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colorFontVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectColorFont">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { listStoreProduct, getStoreProduct, logicDelStoreProduct, addStoreProduct, updateStoreProduct, exportStoreProduct,getRichEditorAttachment,addRichEditorAttachment,updateRichEditorAttachment,addTest } from "@/api/product/storeProduct";
import { storeListParam } from "@/api/store/store";
import { getFormStoreclassify } from "@/api/storeclassify/storeclassify";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios';

export default {
  name: "StoreProduct",
  components: {Treeselect},
  data() {
    var validateDataValue = (rule,value,callback) => {
      
      if(value.length == 0) {
        callback(new Error('请添加全选项目'))
      } else {
        callback()
      }
    }
    var validateDataValue2 = (rule,value,callback) => {
      if(value.length == 0) {
        callback(new Error('请添加多选项目'))
      } else {
        callback()
      }
    }
    var validateYNArray = (rule,value,callback) => {
      if(this.form.isVip == 'Y') {
        if(this.form.vipPrice == '') {
          callback(new Error('请填写会员售价'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      tableHeight:0,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 商品表格数据
      storeProductList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否上架字典
      stateOptions: [],
      // 是否热卖字典
      hotStateOptions: [],
      //门店选择器
      storeOptions:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        storeName: null,
        provinceName: null,
        provinceCode: null,
        cityName: null,
        cityCode: null,
        latitude: null,
        longitude: null,
        geoCode: null,
        productName: null,
        productImage: null,
        itemDetail: null,
        infoId: null,
        classifyId: null,
        price: null,
        storePrice: null,
        offautoTime: null,
        onautoTime: null,
        sort: null,
        salesNum: null,
        fictiNum: null,
        state: null,
        offTime: null,
        offUser: null,
        offUserType: null,
        hotState: null,
        fixedTimeState: null,
        useStartTime: null,
        useEndTime: null,
        disabledDate: null,
        validDay: null,
        appoinNum: null,
        appoinUnit: null,
        peopleNum: null,
        peopleRight: null,
        ruleReminder: null,
      },
      videoFileType:["mp4"],
      // 表单参数
      form: {
        storeId:null,
        productName:'',//团单名称
        classifyId:null,//团单分类
        productImage:'',//团单主图
        itemDetail:'',//团单
        infoId:null,//图文详情Id
        price:'',//团购价格
        storePrice:'',//门店价格
        fictiNum:'',//虚拟销量
        hotState:'N',//是否热卖
        fixedTimeState:'N',//是否是否固定有效期
        validDay:'',//有效期天数
        useStartTime:'',
        useEndTime:'',
        appoinNum: '',//提前多久预约
        appoinUnit:'小时',
        couponsMaxNewUse:0,//商家新人最大优惠
        couponsMaxAll:0,//商家
        peopleNum:1,//适用人数
        peopleRight:'',//适用人群
        service:'',//商家服务
        newUserState:'N',
        isVip:'N',//是否会员专享
        // vipPirce:'',//会员价格
        vipPrice:'',//会员价格
        writeOffNum:'',//核销次数
        dataValue:[
          // { 
          //   classifyIndex:"",
          //   classifyName:"",
          //   productName:"",
          //   price:"",
          // },
        ],
        dataValue2:[
          // { 
          //   name:'',
          //   classifyIndex:"",
          //   classifyName:"",
          //   productName:"",
          //   price:"",
          // },
        ],

        richEditor:[
          // {
          //   "type":"text",
          //   "value":"",
          //   "fontArray":[{"name":"小","value":"font-size:1rem;"},{"name":"中","value":"font-size:1.5rem;"},{"name":"大","value":"font-size:2rem;"}],
          //   "fontSuffix":0,
          //   "colorArray":[{"name":"黑色","value":"color:black;"},{"name":"红色","value":"color:red;"},{"name":"蓝色","value":"color:blue;"},{"name":"绿色","value":"color:green;"}],
          //   "colorSuffix":0,
          //   "fontWeight":"",
          //   "weightState":false,
          //   "fontCenter":"",
          //   "centerState":false
          // },

          // {
          //   "type":"bigImg",
          //   "value":""
          // },

          // {
          //   "type":"littleImg",
          //   "value":[ ]
          // },
          // {
          //   "type":"video",
          //   "value":"",
          //   "videoThumb":""
          // },
          // {
          //   "type":"text",
          //   "value":"",
          //   "fontArray":[{"name":"小","value":"font-size:1rem;"},{"name":"中","value":"font-size:1.5rem;"},{"name":"大","value":"font-size:2rem;"}],
          //   "fontSuffix":0,
          //   "colorArray":[{"name":"黑色","value":"color:black;"},{"name":"红色","value":"color:red;"},{"name":"蓝色","value":"color:blue;"},{"name":"绿色","value":"color:green;"}],
          //   "colorSuffix":0,
          //   "fontWeight":"",
          //   "weightState":false,
          //   "fontCenter":"",
          //   "centerState":false
          // }

        ],
        peopleRightOld: '',//适用人群
      },

      richForm:{
        anyId:0,
        attTitle:"",
        attType:"",
        attValue:"222"

        // anyId: 0,
        // attTitle: "",
        // attType: "",
        // attValue: '[{"type":"text","value":"111111","fontArray":[{"name":"小","value":"font-size:1rem;"},{"name":"中","value":"font-size:1.5rem;"},{"name":"大","value":"font-size:2rem;"}],"fontSuffix":0,"colorArray":[{"name":"黑色","value":"color:black;"},{"name":"红色","value":"color:red;"},{"name":"蓝色","value":"color:blue;"},{"name":"绿色","value":"color:green;"}],"colorSuffix":0,"fontWeight":"","weightState":false,"fontCenter":"","centerState":false},{"type":"bigImg","value":"https://yifeng-1308901251.cos.ap-beijing.myqcloud.com/upload/2024/02/19/12a9b405-064a-477a-8417-186a0e33a705.png"}]',
        // createBy: null,
        // createTime: "2024-02-18 15:14:00",
        // createType: null,
        // delState: null,
        // delTime: null,
        // delType: null,
        // delUser: null,
        // // id: 508,
        // params: {},
        // remark: null,
        // searchValue: null,
        // updateBy: null,
        // updateTime: "2024-02-18 15:25:24",
        // updateType: null
      },

      // 表单校验
      rules: {
      },
      classifyOptions: [{
          value: '1',
          label: '美发'
        }, {
          value: '2',
          label: '美甲'
        }, {
          value: '3',
          label: '美睫'
        }],
        value: '',

      duoxuan: [{
        value: '1选1',
        label: '1选1'
      }],

      YNArray: [
        {
          key: 'Y',
          value: '是'
        },
        {
          key: 'N',
          value: '否'
        }
      ],
      unitArray: [
        {
          value: '小时'
        },
        {
          value: '天'
        }
      ],

      //使用人群 字典查询
      serviceItemDic:[],
      radio2: 120,

      formContent: '', // 初始化HTML内容
      colorFontTitle: '提示', //字体颜色弹窗标题
      colorFontValue: '', //字体颜色选中值
      colorFontValueIndex: 0,// 字体颜色选中值index
      colorFontOptions: [], // 字体颜色下来选项
      colorFontVisible: false, // 字体颜色弹窗
      colorFontIndex: 0, //当前弹窗选择颜色为1，字体大小为2，默认为0
      colorFontEditIndex: 0, //当前编辑的字体颜色的对象index
      rules: {
        storeId: [
          { required: true, message: '请选择门店', trigger: 'blur' },
        ],
        productName: [
          { required: true, message: '请填写团单名称', trigger: 'blur' },
        ],
        classifyId: [
          { required: true, message: '请选择团单分类', trigger: 'blur' },
        ],
        productImage: [
          { required: true, message: '请上传团单主图', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请填写团单售价', trigger: 'blur' },
        ],
        dataValue: [
          { validator: validateDataValue, trigger: 'blur' }
        ],
        dataValue2: [
          { validator: validateDataValue2, trigger: 'blur' }
        ],
        fictiNum: [
          { required: true, message: '请填写虚拟销量', trigger: 'blur' },
        ],
        writeOffNum: [
          { required: true, message: '请填写核销次数', trigger: 'blur' },
        ],
        vipPrice: [
          { validator: validateYNArray, trigger: 'blur' },
        ],
        useStartTime: [
          { required: true, message: '请选择有效开始日期', trigger: 'blur' },
        ],
        useEndTime: [
          { required: true, message: '请选择有效结束日期', trigger: 'blur' }
        ],
        peopleRightOld: [
          { required: true, message: '请选择适用人群', trigger: 'blur' }
        ]
        }
    };
  },
  beforeRouteEnter(to, form, next) {
    next(vm => {
      const storeId = vm.$route.query && vm.$route.query.id;
      vm.queryParams.storeId = storeId
      vm.getList();
    });
  },
  created() {
    //商品分类
    this.getClassify();

    this.calHeight()
      this.getDicts("sys_yes_no").then(response => {
      this.stateOptions = response.data;
    });
    this.getDicts("sys_yes_no").then(response => {
      this.hotStateOptions = response.data;
    });

    this.getDicts("jy_people_right").then(response => {
      this.serviceItemDic = response.data;
    });

    storeListParam().then(res =>{
      this.storeOptions = res
    })
  },
  watch: {
    'showSearch':'calHeight'
  },
  methods: {
    getClassify(){
      getFormStoreclassify().then(res =>{
        this.classifyOptions = res
      })
    },
    //图文详情 添加
    addRich(type){
      let _this = this;
      //1=添加文字，2=添加大图，3=添加小图，4=添加视频
      if(type == 1){
        _this.form.richEditor.push({
            "type":"text",
            "value":"",
            "fontArray":[{"name":"小","value":"font-size:1rem;"},{"name":"中","value":"font-size:1.5rem;"},{"name":"大","value":"font-size:2rem;"}],
            "fontSuffix":0,
            "colorArray":[{"name":"黑色","value":"color:black;"},{"name":"红色","value":"color:red;"},{"name":"蓝色","value":"color:blue;"},{"name":"绿色","value":"color:green;"}],
            "colorSuffix":0,
            "fontWeight":"",
            "weightState":false,
            "fontCenter":"",
            "centerState":false
          });
      }
      if(type == 2){
        _this.form.richEditor.push({
            "type":"bigImg",
            "value":""
          });
      }

      if(type == 3){
        _this.form.richEditor.push({
            "type":"littleImg",
            "value":[]
          });
      }

      if(type == 4){
        _this.form.richEditor.push({
            "type":"video",
            "value":"",
            "videoThumb":""
          });
      }

    },

    //图文详情删除
    tuwendel(index){
      let _this = this;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.form.richEditor.splice(index,1);
        }).then(() => {

        }).catch(() => {});
    },
    //图文详情上移
    moveUp(index){
      let _this = this
      let arr = JSON.parse(JSON.stringify(_this.form.richEditor))
      if(index==0){
        return
      }
      [arr[index],arr[index-1]] = [arr[index-1],arr[index]];
      _this.form.richEditor = []
      _this.form.richEditor = arr
      this.$forceUpdate()
      // this.$set(_this.form, "richEditor", arr)
    },

    //图文详情下移
    moveDown(index){
      let _this = this
      let arr = JSON.parse(JSON.stringify(_this.form.richEditor))
      if(index == arr.length-1){
        return
      }
      [arr[index],arr[index+1]] = [arr[index+1],arr[index]];
      _this.form.richEditor = []
      _this.form.richEditor = arr
      this.$forceUpdate()
      // this.$set(_this.form, "richEditor", arr)
    },

    //图文置顶
    moveTop(index) {
      console.log(index)
      if( index == 0) {
        return
      }
      let _this = this
      let arr = JSON.parse(JSON.stringify(_this.form.richEditor))
      const copyIndex = arr[index]
      arr.splice(index,1)
      arr.unshift(copyIndex)
      _this.form.richEditor = []
      _this.form.richEditor = arr
      this.$forceUpdate()
    },
    addTang(){
      console.log(this.form)
      this.form.dataValue.push({
        classifyIndex:"",
        classifyName:"",
        productName:"",
        price:"",
      })
    },

    del(index){
      this.form.dataValue.splice(index,1);
      // if (index!=0){
      //   this.form.dataValue.splice(index,1);
      // }else {
      //   this.$message.error("无法删除！")
      // }
    },

    addTang2(){
      this.form.dataValue2.push({
        // name:"",
        classifyIndex:"",
        classifyName:"",
        productName:"",
        price:"",
      })
    },

    del2(index){
      this.form.dataValue2.splice(index,1);
      //不能都删除，必须保留一个
      // if (index!=0){
      //   this.form.dataValue2.splice(index,1);
      // }else {
      //   this.$message.error("无法删除！")
      // }
    },

    updateValueT(row,index) {
      let classifyIndex = row.classifyIndex;
      for(let i=0;i<this.options.length;i++){
        if(this.options[i].value == classifyIndex){
          this.form.dataValue[index].classifyName = this.options[i].label
        }
      }
    },

    updateValueT2(row,index) {
      let name = row.name;
      for(let i=0;i<this.duoxuan.length;i++){
        if(this.duoxuan[i].value == name){
          this.form.dataValue2[index].selectIndex = 0
          let arr = [];
          arr.push(name);
          this.form.dataValue2[index].selectPicker = arr;
        }
      }
    },
    updateValueT3(row,index) {
      let classifyIndex = row.classifyIndex;
      for(let i=0;i<this.options.length;i++){
        if(this.options[i].value == classifyIndex){
          this.form.dataValue2[index].classifyName = this.options[i].label
        }
      }
    },

    onSexChange(val){
      console.log(val)
      state.sex= val
    },

    // 表单重置
    // reset() {
    //   this.form = {
    //     id: null,
    //     agentName: null,
    //     agentPhone: null,
    //     agentCode: null,
    //     delState: null,
    //     delUser: null,
    //     delType: null,
    //     delTime: null,
    //     createBy: null,
    //     createType: null,
    //     createTime: null,
    //     updateBy: null,
    //     updateType: null,
    //     updateTime: null
    //   };
    //   this.resetForm("form");
    // },
    reset() {
      this.form = {
        storeId:null,
        productName:'',//团单名称
        classifyId:null,//团单分类
        productImage:'',//团单主图
        itemDetail:'',//团单
        infoId:null,//图文详情Id
        price:'',//团购价格
        storePrice:'',//门店价格
        fictiNum:'',//虚拟销量
        hotState:'N',//是否热卖
        fixedTimeState:'N',//是否是否固定有效期
        validDay:'',//有效期天数
        useStartTime:'',
        useEndTime:'',
        appoinNum: '',//提前多久预约
        appoinUnit:'小时',
        couponsMaxNewUse:0,//商家新人最大优惠
        couponsMaxAll:0,//商家
        peopleNum:1,//适用人数
        peopleRight:'',//适用人群
        service:'',//商家服务
        newUserState:'N',
        isVip:'N',//是否会员专享
        vipPrice:'',//会员价格
        writeOffNum:'',//核销次数
        dataValue:[],
        dataValue2:[],
        richEditor:[],
      };
      this.richForm = {}
      this.resetForm("form");
    },
    handleFormReset() {
      this.reset()
    },
    normalizer(node) {
      return {
        id: node.dictValue,
        label: node.dictLabel,
      };
    },
    calHeight () {
          this.$nextTick(() => {
              const rect = this.$refs.appcontainer.getBoundingClientRect();
              let height= this.$refs.queryForm.$el.offsetHeight;
              this.tableHeight = rect.height-height-120;
          })
      },
    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listStoreProduct(this.queryParams).then(response => {
        // console.log("dddd")
        // console.log(response)
        this.storeProductList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    detailFormatter(row){
      let itemArr = JSON.parse(row.itemDetail)
      console.log(itemArr)
      var str = " "
      for(var i = 0; i <= itemArr.length; i++){
        // str = str + itemArr[i].value.name","
      }

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    /** 搜索按钮操作 */
    handleQuery() {
      this.showSearch=false;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.reset();
      this.title = "添加商品";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      let _this = this;
      const id = row.id || this.ids
      getStoreProduct(id).then(response => {
        _this.form = response.data;
        _this.form.richEditor = [];
        //查询富文本
        let infoId = row.infoId
        getRichEditorAttachment(infoId).then(res => {
          let items = JSON.parse(res.data.attValue)
          if(items) {
            for(let i=0;i<items.length;i++){
              _this.form.richEditor.push(items[i]);
            }
          }
          
          _this.richForm = {
            id: res.data.id,
            anyId: res.data.anyId,
            attTitle: res.data.attTitle,
            attType: res.data.attType,
            attValue: res.data.attValue
          }
        });
        //团单整理
        let itemDetail = JSON.parse(_this.form.itemDetail);
        for(let i=0;i<itemDetail.length;i++){
          if(itemDetail[i].type == "mainAttr"){
            _this.form.dataValue = itemDetail[i].value;
          }
          if(itemDetail[i].type == "multipleAttr"){
            _this.form.dataValue2 = itemDetail[i].value;
          }
        }
        //不存在团单时,默认设置空数组
        if(!_this.form.dataValue) {
          _this.form.dataValue = []
        }
        if(!_this.form.dataValue2) {
          _this.form.dataValue2 = []
        }
        //整理适用人群
        let peopleRight = JSON.parse(_this.form.peopleRight);
        _this.form.peopleRightOld = peopleRight[0].dictValue
        _this.open = true;
        _this.title = "修改商品";
      });
    },

    getItemDetail(){
      let arr = [];
      let arr1 = {};
      let store_price = 0;
      if(this.form.dataValue.length > 0){
        arr1.type = 'mainAttr';
        arr1.name = "包含以下所有项";
        arr1.value = this.form.dataValue;
        arr.push(arr1);

        let dataValue = this.form.dataValue;
        for(let i=0;i<dataValue.length;i++){
          store_price += parseInt(dataValue[i].price)
        }

      }
      if(this.form.dataValue2.length > 0){
        let arr4 = [];
        let arr2 = {};
        for(let i=0;i<this.form.dataValue2.length;i++){
          store_price += parseInt(this.form.dataValue2[i].price)

          let arr3 = {}; 
          arr3.productName = this.form.dataValue2[i].productName;
          arr3.price = this.form.dataValue2[i].price;
          arr3.classifyIndex = this.form.dataValue2[i].classifyIndex;
          arr3.classifyName = this.form.dataValue2[i].classifyName;

          arr4.push(arr3);
        }
        arr2.type = "multipleAttr";
        arr2.name = this.form.dataValue2.length+"选1"
        arr2.selectPicker = [this.form.dataValue2.length+"选1"];
        arr2.selectIndex = 0;
        arr2.value = arr4;
        arr.push(arr2);
      }

      // let return_arr = {
      //   'itemDetail':JSON.stringify(arr),
      //   'store_price':store_price
      // };
      
      this.form.storePrice = store_price;
      return JSON.stringify(arr);
    },

    //改变提交的值
    changeFormData(){
      let peopleRightOld = this.form.peopleRightOld
      let peopleRight = [];
      if(peopleRightOld == 'All'){
        peopleRight = [{"dictLabel":"男女通用","dictValue":"All"}];
      }
      if(peopleRightOld == 'Women'){
        peopleRight = [{"dictLabel":"女士专享","dictValue":"Women"}];
      }
      if(peopleRightOld == 'Man'){
        peopleRight = [{"dictLabel":"男士专享","dictValue":"Man"}];
      }
      this.form.peopleRight = JSON.stringify(peopleRight);
    },
    //处理富文本小图问题
    changeFormRichEditor(){
      let richEditor = this.form.richEditor
      if(richEditor.length > 0){
        for(let i=0;i<richEditor.length;i++){
          if(richEditor[i].type == "littleImg"){
            richEditor[i].value = richEditor[i].value.split(",");
          }
        }
        this.form.richEditor = richEditor;
        this.richForm.attValue = JSON.stringify(this.form.richEditor)
      }
    },
    selectColorFont() {},
    editBlack(index) {
      const options = this.form.richEditor[index]['colorArray']
      options.forEach(item => {
        item.label = item.name
      })
      this.colorFontTitle = '选择字体颜色'
      this.colorFontIndex = 1
      this.colorFontEditIndex = index
      this.colorFontOptions = options
      this.colorFontVisible = true
    },
    editFontSize(index,type) {
      const options = this.form.richEditor[index]['fontArray']
      options.forEach(item => {
        item.label = item.name
      })
      this.colorFontTitle = '选择字体大小'
      this.colorFontIndex = type
      this.colorFontEditIndex = index
      this.colorFontOptions = options
      this.colorFontVisible = true
    },
    colorFontChange(e) {
      const index = this.colorFontOptions.findIndex(item => {
        return item.value == e
      })
      this.colorFontValue =  this.colorFontOptions[index]['label']
      this.colorFontValueIndex = index
    },
    selectColorFont() {
      this.colorFontIndex == 1 ?this.form.richEditor[this.colorFontEditIndex]['colorSuffix'] = this.colorFontValueIndex : this.form.richEditor[this.colorFontEditIndex]['fontSuffix'] = this.colorFontValueIndex
      this.colorFontVisible = false
    },
    handleClose() {
      this.colorFontTitle = '提示', //字体颜色弹窗标题
      this.colorFontValue = '', //字体颜色选中值
      this.colorFontValueIndex = 0,// 字体颜色选中值index
      this.colorFontOptions = [], // 字体颜色下来选项
      this.colorFontVisible = false, // 字体颜色弹窗
      this.colorFontIndex = 0, //当前弹窗选择颜色为1，字体大小为2，默认为0
      this.colorFontEditIndex = 0 //当前编辑的字体颜色的对象index
    },
    editorBold (index) {
      this.form.richEditor[index].weightState = !this.form.richEditor[index].weightState
      this.form.richEditor[index].fontWeight = this.form.richEditor[index].weightState ? 'font-weight: bold;' : ''
    },
    editorCenter (index) {
      this.form.richEditor[index].centerState = !this.form.richEditor[index].centerState
      this.form.richEditor[index].fontCenter = this.form.richEditor[index].centerState ? 'text-align: center;' : ''
    },
    // clear(){
    //   this.form.richEditor = [];
    //   this.form.dataValue = [];
    //   this.form.dataValue2= [];
    //   this.form.productImage = '';
    // },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          //处理富文本小图问题
          this.changeFormRichEditor();
          //处理团单
          this.form.itemDetail = this.getItemDetail();
          //处理选择适合人群
          this.changeFormData();

          if (this.form.id != null) {
            //修改
            //修改富文本
            const richData = Object.assign(...this.form.richEditor,this.richForm)
            updateRichEditorAttachment(richData).then((res) => {
              //返回1表示富文本更新成功
              if(res == 1) {
                updateStoreProduct(this.form).then(response => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.reset();
                  this.handleQuery();
                });
              } else {
                this.msgError('富文本更新失败')
              }
            })
            
          } else {
            addRichEditorAttachment(this.richForm).then(response => {
              this.form.infoId = response.id
              addStoreProduct(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.reset();
                this.handleQuery();
              }).catch(res=>{});

            }).catch(res=>{});
          }
        }

      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return logicDelStoreProduct(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有商品数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportStoreProduct(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>

<style scoped  >
 .el-dialog-div{
    height: 60vh;
    overflow: auto;
  }
 .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  /*打开时文字位置设置*/
.el-switch__label--right {
    z-index: 1;
    right: 8px;
  }
  /*关闭时文字位置设置*/
 .el-switch__label--left {
    z-index: 1;
    left: 8px;
  }
  /*显示文字*/
  .el-switch__label.is-active {
    display: block;
  }
 .el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important;
  }
 /deep/ .el-upload--picture-card{
   width: 60px;
   height: 60px;
   line-height: 66px;
 }
 /deep/ .el-upload-list--picture-card .el-upload-list__item{
   width: 60px;
   height: 60px;
   margin: 0;
 }
 /deep/ .el-upload-list__item-status-label{
   display: none;
 }
   .component-upload-image el-upload-list--picture-card{
    margin: 0;
  }
  .component-upload-image .hide{
    height: 60px;
  }
 .el-dialog-div .el-button{
    margin-bottom: 20px;
  }
  .el-table__body tr .current-row > td{
    background: #fff !important;
  }
  .editorTextarea.bold ::v-deep textarea{
    font-weight: bold;
  }
  .editorTextarea.center ::v-deep textarea{
    text-align: center;
  }
  .editorTextarea.blackcolor ::v-deep textarea {
    color: #000000;
  }
  .editorTextarea.bluecolor ::v-deep textarea {
    color: blue;
  }
  .editorTextarea.greencolor ::v-deep textarea {
    color: green;
  }
  .editorTextarea.redcolor ::v-deep textarea {
    color: red;
  }
  .editorTextarea.smallfont ::v-deep textarea {
    font-size:1rem;
  }
  .editorTextarea.midfont ::v-deep textarea {
    font-size:1.5rem;
  }
  .editorTextarea.bigfont ::v-deep textarea {
    font-size:2rem;
  }

</style>
